<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/head.css">
    <script src="./js/jquery.i18n.min.js"></script>
    <script src="./js/i18n.js"></script>

</head>

<body>
    <div class="logo-img">
        <a href="./index.html"> <img src="./images/logo.png" alt=""></a>
    </div>
    <img src="./images/menu.png" alt="" class="menu-icon">
    <div class="menu-wrapper">
        <div class="menu-content">
            <ul class="nav-list">
                <li class="cur"><a href="#01">会社概要</a></li>
                <li><a href="#02">经营理念</a></li>
                <li><a href="#03">物件展示</a> </li>
                <li><a href="#04">不动产买卖流程</a> </li>
                <li><a href="#05">不动产小知识</a> </li>
                <li><a href="#06">咨询窗口</a> </li>
                <li><a href="#07">会社其他业务</a> </li>
            </ul>
            <ul class="lang-list">
                <li class="cur"><a href="#"><img src="./images/japan-162328_960_720.png" alt=""></a></li>
                <li><a href="#"><img src="./images/china.png" alt=""></a></li>
            </ul>
        </div>
    </div>
    <div id="mask">
        <div class="mask-menu-content">
            <img src="./images/back.png" alt="" class="back-icon">
            <ul class="mask-nav-list">
                <li class="cur"><a href="#01">会社概要</a></li>
                <li><a href="#02">经营理念</a></li>
                <li><a href="#03">物件展示</a> </li>
                <li><a href="#04">不动产买卖流程</a> </li>
                <li><a href="#05">不动产小知识</a> </li>
                <li><a href="#06">咨询窗口</a> </li>
                <li><a href="#07">会社其他业务</a> </li>
            </ul>
            <ul class="mask-lang-list">
                <li class="cur"><a href="#"><img src="./images/japan-162328_960_720.png" alt=""></a></li>
                <li><a href="#"><img src="./images/china.png" alt=""></a></li>
            </ul>
        </div>
    </div>
    <script src="./js/jquery-3.5.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/head.js"></script>

</body>

</html>
<style>
    .top-bar {
        position: fixed;
        top: 0;
        left: 0;
        background: #FFF;
        z-index: 666;
        width: 100%;
        height: 66px;
        line-height: 64px;
        padding: 0 9% 0 7.3%;
        font-size: 14px;
    }

    .top-bar .logo-img {
        float: left;
        width: 160px;
        height: 40px;
    }

    .top-bar .logo-img img {
        margin-top: 9px;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .top-bar .menu-icon {
        display: none;
    }

    .menu-wrapper {
        float: right;
    }

    .menu-wrapper .menu-content {
        display: flex;
    }

    .menu-content .nav-list,
    .menu-content .lang-list {
        display: flex;
    }

    .nav-list li {
        margin: 0 15px;
    }

    .nav-list li.cur {
        border-bottom: 2px solid #4ea0ff;
    }

    .nav-list li a,
    .lang-list li a {
        color: #666;
        text-decoration: none
    }

    .nav-list li a {
        font-weight: bold;
    }

    .nav-list li.cur a {
        color: #4ea0ff;
    }

    .lang-list li {
        margin: 0 7px;
    }

    .lang-list li a {
        font-size: 12px;
    }

    #mask {
        display: none;
    }

    @media screen and (max-width: 750px) {
        .top-bar {
            height: .94rem;
            font-size: .14rem;
            padding: 0 .24rem;
        }

        .top-bar .logo-img {
            width: 2.3rem;
            height: .5rem;
        }

        .top-bar .logo-img img {
            margin-top: .2rem;
            margin-bottom: .2rem;
        }

        .top-bar .menu-icon {
            display: block;
        }

        .top-bar .menu-icon {
            float: right;
            width: .45rem;
            height: .36rem;
            margin-top: .3rem;
            object-fit: fill;
        }

        .menu-wrapper {
            display: none;
        }

        #mask {
            background: rgba(0, 0, 0, .6);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 667;
        }

        .mask-menu-content {
            height: 100%;
            margin-left: 46.67%;
            width: 53.33%;
            background: #fff;
            padding-top: .3rem;
        }

        .mask-menu-content .back-icon {
            display: block;
            width: .53rem;
            height: .38rem;
            margin-bottom: .1rem;
            margin-left: .3rem;
        }

        .mask-nav-list,
        .mask-lang-list {
            padding: 0 .2rem;
        }

        .mask-nav-list li {
            text-align: center;
            padding: .18rem 0;
            border-bottom: 1px solid #ccc;
            font-weight: bold;
        }

        .mask-nav-list li a {
            display: block;
            color: #000;
            font-size: .16rem;
            line-height: .71rem;
            text-decoration: none;
        }

        .mask-lang-list {
            display: flex;
        }

        .mask-lang-list li {
            flex: 1;
            text-align: center;
        }

        .mask-lang-list li a {
            font-size: 12px;
            text-decoration: none;
        }

    }

    /* ============================navBar end =================================*/
</style>
<script>

</script>